import React, {useState} from 'react';

import {Button, Input, Select, Space} from 'antd';

import './index.less';
import useRegions from "@/hooks/useRegions.ts";
import RegionCascader from "@/components/RegionCascader";
import {ScenicLevelMap} from "@/enums/scenic/map.ts";
import useBaseFontSize from "@/hooks/useBaseFontSize.ts";

interface PageQueryInterface {
    onChange: Function,
    notLevel?: boolean
}

const ScenicLevelOptions = ScenicLevelMap.toOption()
const Index: React.FC<PageQueryInterface> = ({onChange, notLevel}) => {
    const resetParams = () => {
        setParams({});
        onChange && onChange({})
    }

    const [params, setParams] = useState<any>({})

    const handleChange = (key: string, value: any, doQuery: boolean = true) => {
        const newParams = {...params};
        newParams[key] = value;
        setParams(newParams);
        if (doQuery) {
            onChange && onChange(newParams)
        }
    }

    const baseFontSize = useBaseFontSize();
    const [regions] = useRegions()

    return <div className="page-query">
        <Space size={11}>
            <RegionCascader options={regions} value={params.zoneCode} style={{width: '169.5rem'}}
                            onChange={value => handleChange('zoneCode', value)} size={'small'}/>
            {!notLevel && (
                <Select placeholder="等级"
                        size={'small'}
                        value={params.level}
                        style={{width: '169.5rem'}}
                        onChange={value => handleChange('level', value)}
                        options={ScenicLevelOptions}
                        allowClear/>
            )}
        </Space>
        <div>
            <Space size={11 * baseFontSize} style={{marginTop: '10rem'}}>
                <Input
                    size={'small'}
                    value={params.name}
                    placeholder="请输入景区名称搜索"
                    style={{width: '223rem'}}
                    allowClear
                    onChange={e => handleChange('name', e.target.value, false)}
                    onPressEnter={() => onChange && onChange(params)}
                />
                <Button size={'small'} block={true} onClick={() => onChange && onChange(params)} type={"primary"}>
                    查询
                </Button>
                <Button size={'small'} block={true} onClick={resetParams}>
                    重置
                </Button>
            </Space>
        </div>
    </div>
}

export default Index;
